<template>
    <div>
        <ContentWrap style="border-radius: 20px;">
            <!-- 未签合同的 -->
            <div class="btn">
                <el-button type="primary">未签合同</el-button>
                <el-button type="primary" plain @click="check">查看更多</el-button>
            </div>
            <el-table :data="tableData" stripe style="width: 100%" class="bd">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="contractId" label="合同编号" align="center" />
                <el-table-column prop="productType" label="产品种类" align="center" />
                <el-table-column prop="proState" label="合同状态" align="center" />
                <el-table-column prop="total" label="总量" align="center" />
                <el-table-column prop="start" label="开始时间" align="center" />
                <el-table-column prop="expiration " label="到期时间" align="center" />
                <el-table-column label="操作" align="center">
                    <template #default>
                        <el-button link type="primary" v-hasPermi="['cms:contract:update']" @click="inspect">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--未签合同弹窗  -->
            <el-dialog v-model="dialogVisible" title="未签合同">
                <el-table :data="gridData">
                    <el-table-column prop="contractId" label="合同编号" align="center" />
                    <el-table-column prop="productType" label="产品种类" align="center" />
                    <el-table-column prop="proState" label="合同状态" align="center" />
                    <el-table-column prop="total" label="总量" align="center" />
                    <el-table-column prop="start" label="开始时间" align="center" />
                    <el-table-column prop="expiration " label="到期时间" align="center" />
                </el-table>
            </el-dialog>


            <!-- 待配送任务的 -->
            <div class="btn">
                <el-button type="primary">待配送任务</el-button>
                <el-button type="primary" plain @click="fnts">查看更多</el-button>
            </div>
            <el-table :data="tableDataFrom" stripe style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="concrete" label="商砼企业" align="center" />
                <el-table-column prop="quantity" label="配送数量" align="center" />
                <el-table-column prop="project" label="项目/地址" align="center" />
                <el-table-column prop="product" label="产品" align="center" />
                <el-table-column prop="create" label="创建时间" align="center" />
                <el-table-column prop="order" label="订单号" align="center" />
                <el-table-column prop="delivery" label="配送时间" align="center" />
            </el-table>
        </ContentWrap>




        <!-- 待派送任务弹窗 -->
        <el-dialog v-model="dialogTableVisible" title="未签合同">
            <el-table :data="gridData">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="concrete" label="商砼企业" align="center" />
                <el-table-column prop="quantity" label="配送数量" align="center" />
                <el-table-column prop="project" label="项目/地址" align="center" />
                <el-table-column prop="product" label="产品" align="center" />
                <el-table-column prop="create" label="创建时间" align="center" />
                <el-table-column prop="order" label="订单号" align="center" />
                <el-table-column prop="delivery" label="配送时间" align="center" />
            </el-table>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">


import { reactive, ref } from 'vue'
const tableData = [{}]
const tableDataFrom = [{}]

const dialogTableVisible = ref(false)

const gridData = reactive([])

// 控制弹窗
const dialogVisible = ref(false)
const fnts = () => {
    dialogTableVisible.value = true
}


const check = () => {
    dialogVisible.value = true

}

// 查看合同详情
const inspect = () => {

}
</script>

<style scoped lang="scss">
.btn {
    display: flex;
    justify-content: space-between;
}

.bd {
    margin-bottom: 20px;
}
</style>